<template>
    <div class="con" >
        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <div class="header">
                    <img src="../assets/images/giftwood.png" alt="" class="header" onclick="return false">
                
                    <img :src="siteImageUrl+title_img" alt="" class="title"  onclick="return false">

        </div>
              <!-- 礼物列表 -->
        <div class="giftList">
            <ul>
                <li v-for="item in gift_list">
                    <img src="../assets/images/pic_gift_wood.png" alt="" onclick="return false">
                    <img :src="siteImageUrl+item.thumb" alt="" class="giftImg" onclick="return false">
                    <img :src="siteImageUrl+item.title_img" alt="" class="giftText" onclick="return false">
                    <a href="javascript:;" @click="check(item)" class="check">
                        <img src="../assets/images/btn_clickbox.png" alt="" onclick="return false">
                        <img src="../assets/images/yes.png" alt="" :class="{selectYes:item.checked}" onclick="return false">
                    </a>
                </li>  
                              
            </ul>
        </div>
         <img src="../assets/images/btn_Enter.png" alt="" class="enter" @click.prevent="enter()" >

        

    </div>
</template>

<script>
export default {
    name: "giftDetail",
    data() {
        return {
            gift_list: [],
            id: "",
            show: true,
            title_img: ""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    methods: {
        check(item) {
            this.id = item.id;
            for (var i in this.gift_list) {
                this.gift_list[i].checked = false;
            }
            item.checked = true;
            console.log(this.gift_list);
            console.log(this.id);
        },
        enter() {
            if (this.id == "") {
                alert("请选择要兑换的礼物");
            } else {
                var qs = require("qs");

                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/piaowu/api/gift_exchange_self`,
                    data: qs.stringify({
                        member_id: $.cookie("osc_member_id"),
                        token: $.cookie("osc_member_token"),
                        gift_id: this.id,
                        gift_member_id: $.cookie("osc_member_id"),
                        point_detail_id: this.$route.params.point_detail_id
                    })
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.status == 1) {
                            if (response.data.data.msg == "兑换成功") {
                                alert("兑换成功");
                                this.$router.push({ name: "gift" });
                            } else {
                                alert(response.data.data.msg);
                            }
                        } else {
                            alert("请求失败：" + response.data.msg);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    mounted: function() {
        var qs=require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/point_gift_list`,
            data: qs.stringify({
                member_id: $.cookie("osc_member_id"),
                token: $.cookie("osc_member_token"),
                point: this.$route.params.point
            })
        })
            .then(response => {
                console.log(response);
                if (response.data.status == 1) {
                    this.title_img = response.data.data.title_img;
                    this.gift_list = response.data.data.list;
                    this.gift_list.forEach((item, index) => {
                        if (typeof item.checked == "undefined") {
                            this.$set(item, "checked", false);
                        }
                    });
                    
                } else {
                    alert("请求失败：" + response.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
}
.con .header {
    width: 100%;
    position: relative;
}
.con .logo {
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 30%);
}
.con .title {
    position: absolute;
    left: 50%;
    width: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
}

.giftList {
    overflow: hidden;
}

.giftList li {
    width: 50%;
    float: left;
    position: relative;
}
.giftList li img:first-child {
    width: 90%;
}

.giftList .giftImg {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.giftList .giftText {
    position: absolute;
    left: 8%;
    bottom: -6%;
    width: 70%;
}

.giftList .check {
    position: absolute;
    right: 12%;
    bottom: -1%;
    width: 24px;
    height: 24px;
}

.con .enter {
    width: 50%;
    margin-top: 20px;
}
.con .selectYes {
    width: 22px;
    height: 22px;
    position: absolute;
    left: 1px;
    top: 0px;
}

.con img {
    border: none;
}
</style>
